require(["config"],function(){
    require(["jquery","template","cookie","fly","load"],function($,template){
        function productDetaile(){
            this.init();
            this.count = 1; //商品数量管理
            // 配置cookie
            $.cookie.json = true;
        };

        $.extend(productDetaile.prototype,{
            init(){
                this.loadDetaile();
                // 事件函数添加
                this.onEventHandler();
                //加载详情页猜你喜欢的商品
                this.likeProductHandler();
            },
            // 详情数据加载
            loadDetaile(){
                //获取查询字符串 id 
                let _search = location.search.split("=").pop();
                $.getJSON("http://rap2api.taobao.org/app/mock/data/720657",data => {
                    const _data = data.res_body.data;
                    _data.forEach((curr,index) => {
                        if(curr.id == _search){
                            const _dataHtml = template("smallImgUrl",{samllImg:_data[index].detaileImg});
                            $(".detaile-small-img-list").html(_dataHtml);
                            $(".product_id").text(curr.id);
                            $(".detaileTitle").text(_data[index].productTit);
                            $(".detaileTpis").text(_data[index].tpis);
                            $(".detailePrice").text("￥" + _data[index].price);
                            $(".middleImg").attr("src",_data[index].middleImage);
                            $(".bigImg").attr("src",_data[index].middleImage);
                            $(".assessImg").attr("src",_data[index].bigImage);
                            $(".total").text(_data[index].total);
                            $(".number").text(this.count);
                        }
                    })
                })   
            },
            // 加载喜欢商品的数据
            likeProductHandler(){
                $.getJSON("http://rap2api.taobao.org/app/mock/data/724834",data =>{
                    const _likeHtml = template("likeProduct",{likeArr:data.res_body.data})
                    $(".assess-right-con").html(_likeHtml);
                })
            },
            onEventHandler(){
                //详情页面数量加操作
                $(".plus").on("click",$.proxy(this.productNumberPlus,this));
                // 详情页面数量减操作
                $(".reduce").on("click",$.proxy(this.productNumberReduce,this));
                // 立即购买事件处理
                $(".det-shopping").on("click",$.proxy(this.shoppingProduct,this));
                // 加入购物车
                $(".det-cart").on("click",$.proxy(this.productAddToCart,this));
                // 鼠标移入
                $(".detaile-big-img").on("mouseover",$.proxy(this.mouseoverEvent,this))
                //鼠标移出
                $(".detaile-big-img").on("mouseout",$.proxy(this.mouseoutEvent,this))
                // 图片间切换
                $(".detaile-small-img-list").on("click","img",$.proxy(this.imgTab,this))
                //商品详情和评论切换
                $(".btn-toggle").on("click","a",$.proxy(this.toogleDe,this))
            },
            mouseoutEvent(){
                $(".zhezhao").addClass("active");
                $(".detaile-middle-img").addClass("active");
            },
            imgTab(ev){
                const _imgUrl = $(ev.target).attr("src");
                $(".middleImg").attr("src",_imgUrl);
                $(".bigImg").attr("src",_imgUrl);
                $(ev.target).parent("li").css({
                    borderColor:"#f00"
                }).siblings().css({
                    borderColor:"#ccc"
                })
            },
            toogleDe(ev){
                const $srcEle = $(ev.target);
                const _index = $srcEle.index();
                $srcEle.addClass("active").siblings().removeClass("active");
                if(_index == 0){
                    $(".assess-pro-con").css({display:"block"});
                    $(".assess-ass-con").css({display:"none"});
                }else{
                    $(".assess-pro-con").css({display:"none"});
                    $(".assess-ass-con").css({display:"block"})
                }
                
            },
            // 鼠标移入事件
            mouseoverEvent(){
                $(".zhezhao").removeClass("active");
                $(".detaile-middle-img").removeClass("active");
                $(".detaile-big-img").on("mousemove",function(ev){  
                    let _left = Math.floor(ev.pageX - $(this).offset().left - $(".zhezhao").width()/2);
                    let _top = Math.floor(ev.pageY - $(this).offset().top - $(".zhezhao").height()/2);
                    if(_left <= 0){
                        _left = 0;
                    }else if(_left >= $(this).width() - $(".zhezhao").width()){
                    _left = $(this).width() - $(".zhezhao").width()
                    }
                    if(_top <= 0){
                        _top = 0;
                    }else if( _top >= $(this).height() - $(".zhezhao").height()){
                    _top = $(this).height() - $(".zhezhao").height()
                    }

                    $(".zhezhao").css({
                        left : _left + "px",
                        top : _top + "px"
                    });
                    $(".detaile-middle-img img").css({
                        left : _left * -2 + "px",
                        top : _top * -2 + "px"
                    })
                })
                
            },
            // 加事件函数处理
            productNumberPlus(){
                this.count ++;
                if(this.count >= $(".total").text()){
                    this.count = $(".total").text();
                };
                $(".number").text(this.count);
                return false;
            },
            // 减事件函数处理
            productNumberReduce(){
                this.count --;
                if(this.count <= 1){
                    this.count = 1;
                }
                $(".number").text(this.count);
                return false;
            },
            // 购买商品 
            shoppingProduct(){
                // 判断用户是否登录
                const len = $.cookie("Username") || [];
                if(len.length == 0){
                    alert("客官，要先登录额");
                    location.href = "/html/login.html";
                    return ;
                }
                // 传递购买商品id和购买数量
                const _id = $(".product_id").text();
                location.href = `/html/shopping-cart.html?id=${_id}&productNum=${this.count}`;
            },
            //加入购物车
            productAddToCart(event){
                // 判断用户是否登录
                const len = $.cookie("Username") || [];
                if(len.length == 0){
                    alert("客官，要先登录额");
                    location.href = "/html/login.html";
                    return ;
                }
                // 首先要获取购买商品的信息
                const productMes = {
                    id : $(".product_id").text(),
                    price : $(".detailePrice").text().slice(1),
                    title : $(".detaileTitle").text(),
                    tpis : $(".detaileTpis").text(),
                    img : $(".middleImg").attr("src"),
                    num : this.count
                }

                // 保存cookie第一步,先获取在cookie中已经保存的数据
                const cart = $.cookie("cart") || [];
                // 获取后判断cookie这个数组中是否有这个商品id，如果有，则增加该商品的数量
                const has = cart.some((curr) => {
                    if(curr.id == productMes.id){
                        curr.num++;
                        return true;
                    }
                    return false;
                })
                // 如果cookie返回的数组中没有这个商品的额信息，则把这个商品的信息添加到cart中
                if(!has){
                    cart.push(productMes);
                }
                // 最后把cart这个数组从新保存到cookie中
                $.cookie("cart",cart,{expires:10,path:"/"});
                
                // 调用抛物线效果
                this.flyHandler(event,productMes);

                $(".cart i").text( $.cookie("cart").length);
                return false;
            },
            // 抛物线效果
            flyHandler(ev,productMes){
                // 添加购物车成功后添加抛物线效果
                // 获取终点坐标位子,获取点击时候的坐标
                const   
                end = $(".cart").offset(),
                start =  {
                        top : ev.pageY,
                        left : ev.pageX
                    },
                flyer = $("<img src="+ productMes.img +"/>").css({
                            width:60,
                            height:20,
                            background:"#f00"
                        });
                flyer.fly({
                    start,
                    end,
                    onEnd(){
                        this.destroy();
                    }
                });

            }
        });
        new productDetaile();
    })
})